<template>
  <el-dialog
    v-if="load"
    title="编辑"
    v-model="visible"
    align-center
    width="500px"
    @close="handleClose"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :z-index="2000"
  >
    <el-form ref="formRef" :model="form" label-align="right" label-width="120">
      <el-form-item label="SKU:">
        <el-input v-model="form.sku" disabled />
      </el-form-item>
      <el-form-item label="国家区域:">
        <el-input v-model="form.country_area_name" disabled />
      </el-form-item>
      <el-form-item label="国家:">
        <el-input v-model="form.country_list_text" disabled />
      </el-form-item>
      <el-form-item label="重量(g):">
        <el-input v-model="form.gross_weight_g" disabled />
      </el-form-item>
      <el-form-item label="体积(cm³):">
        <el-input v-model="form.volume" disabled />
      </el-form-item>
      <el-form-item label="报关价格(CNY):">
        <el-input v-model="form.customs_declaration_price_cny" disabled />
      </el-form-item>
      <el-form-item label="单个运费(CNY)">
        <el-input
          v-model="form.single_freight"
          placeholder="请输入"
          oninput="value=value.replace(/[^\d.]/g,'').replace(/^(\d*\.?\d{0,2}).*/,'$1')"
        />
      </el-form-item>
      <el-form-item label="单个税费(CNY)">
        <el-input
          v-model="form.single_tax_fee"
          placeholder="请输入"
          oninput="value=value.replace(/[^\d.]/g,'').replace(/^(\d*\.?\d{0,2}).*/,'$1')"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="flex justify-center py-2">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="save">保 存</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ElMessage } from "element-plus";
import { reactive, toRefs } from "vue";

const load = ref(false);
const visible = ref(false);

const emit = defineEmits(["close", "updateForm"]);
const props = defineProps({
  modelValue: {
    type: Object,
    default: () => {},
  },
});

const title = ref("");
// 打开弹窗
const open = async (row) => {
  if (!load.value) {
    load.value = true;
    await 1;
  }
  if (row) {
    form.value = Object.assign({}, row);
  }
  visible.value = true;
};

let form = ref({});

// 关闭弹窗
const close = () => {
  visible.value = false;
};

const handleClose = () => {
  emit("close");
};
// 提交
const save = () => {
  emit("updateForm", form.value);
  close();
};

defineExpose({ open });
</script>
